<template>
  <div class="commodity-unit" @click="gotoDetail">
    <div class="commodity-unit-left">
      <img :src="commodityInfo.textpictureurl | https" class="commodity-unit-img" style="filter:brightness(0.9);">
      <p class="commodity-unit-price">分享可得 <span> ¥{{commodityInfo.sharepic}}</span></p>
    </div>
    <div class="commodity-unit-info">
      <p class="commodity-unit-info-title">{{commodityInfo.title}}</p>
      <div class="commodity-unit-info-data">
        <span class="like" :class="{active: commodityInfo.islike}">{{commodityInfo.likenum}}</span>
        <span class="comment">{{commodityInfo.commentnum}}</span>
        <span class="collection" @click.stop="collection" :class="{active: commodityInfo.isenshrine}"></span>
      </div>
    </div>
  </div>
</template>
 <script>
 import { collection} from '../../common/api/distribution'
export default {
  props: {
    commodityInfo: {
      type: Object
    }
  },
  methods: {
    gotoDetail() {
      this.$router.push(`/distribution/detailed/${this.commodityInfo.id}`)
    },

    collection() {
      let item = this.commodityInfo
      if (item.isenshrine) {
        let opt = {
          imagetextid: item.id,
          isenshrine: 0
        }
        collection(opt)
          .then(res => {
            if (res) {
              this.$set(item, 'isenshrine', 0)
            }
          })
          .catch(e => {
            console.log(e)
          })
      } else {
        let opt = {
          imagetextid: item.id,
          isenshrine: 1
        }
        collection(opt)
          .then(res => {
            if (res) {
              this.$set(item, 'isenshrine', 1)
            }
          })
          .catch(e => {
            console.log(e)
          })
      }
    },

  }
}
</script>
<style lang='scss' scoped>
.commodity-unit {
  width: 100%;
  height: 28.8vw;
  box-shadow: 0 3px 7px 0 rgba(0, 0, 0, 0.1);
  border-radius: 8px;
  padding: 2.4vw;
  display: flex;
  justify-content: space-between;
}
.commodity-unit-img {
  width: 42.67vw;
  height: 24vw;
  border-radius: 8px;
}
.commodity-unit-left {
  position: relative;
}
.commodity-unit-price {
  height: 5vw;
  display: flex;
  align-items: center;
  position: absolute;
  right: 0;
  bottom: 3.2vw;
  font-size: 10px;
  padding: 0 3vw;
  background-color: #fff;
  border-radius: 2vw 0 0 2vw;
  span {
    color: #ffc700;
    font-family: BASE_PRICE;
    font-size: 14px;
  }
}

.commodity-unit-info {
  width: 44vw;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 1vw 0;
}
.commodity-unit-info-title {
  font-size: 12px;
  color: rgb(51, 51, 51);
  line-height: 1.6;
  font-weight: 600;
}
.commodity-unit-info-data {
  display: flex;
  justify-content: space-between;
  span {
    font-size: 12px;
    &.like::before {
      content: "";
      background: url(/static/img/d_like.png);
      width: 13px;
      height: 13px;
      float: left;
      background-size: 13px 13px;
      margin-right: 4px;
    }
    &.like.active::before {
      content: "";
      background: url(/static/img/d_dlike2.png);
      width: 13px;
      height: 13px;
      float: left;
      background-size: 13px 13px;
      margin-right: 4px;
    }
    &.comment::before {
      content: "";
      background: url(/static/img/d_comment.png);
      width: 13px;
      height: 13px;
      float: left;
      background-size: 13px 13px;
      margin-right: 4px;
    }
    &.collection::before {
      content: "";
      background: url(/static/img/d_like1.png);
      width: 13px;
      height: 11px;
      float: right;
      background-size: 13px 11px;
      margin-right: 4px;
    }
    &.collection.active::before {
      content: "";
      background: url(/static/img/d_like2.png);
      background-size: 13px 11px;
    }
  }
}
</style>
 